<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页定位导航效果扩展案例</title>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            line-height: 1.7;
            background-color: #888;
        }

        li {
            list-style: none;
        }

        #content {
            width: 1000px;
            margin: 0 auto;
            padding-top: 100px;
            padding-bottom: 300px;
        }

       
   /*请补充此处代码，让右侧广告正确显示*/
        #content .item{
            width: 100%;
            height: 540px;
            position: relative;
        }

        #content .item img {
            position: absolute;
            top: 100px;
            left: 40px;
        }

        #content #item1 {
            background: url("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat center top;
        }

        #content #item2 {
            background: url("http://img.mukewang.com/536c9ecd0001606d10000540.jpg") no-repeat center top;
        }

        #content #item3 {
            background: url("http://img.mukewang.com/536c9f0a0001ccc310000540.jpg") no-repeat center top;
        }

        #content #item4 {
            background: url("http://img.mukewang.com/536c9f6700012e9010000540.jpg") no-repeat center top;
        }

        #content #item5 {
            background: url("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat center top;
        }

      
  /*请补充此处代码，让导航菜单在左侧绝对定位显示*/
        #menu{
            position:fixed;
            left:50%;
            top:100px;
            margin:0 500px;
        }


        #menu h1 {
            color: #fff;
            font-size: 14px;
            text-align: center;
            background: #ee1111;
            line-height: 30px;
        }

        #menu ul li a {
            display: block;
            margin: 5px 0;
            font-size: 12px;
            color: #ccc;
            width: 160px;
            padding: 10px 20px;
            text-decoration: none;
            text-align: left;
            border-bottom: 1px dashed #999;
        }

        #menu ul li a strong {
            color: #f1f1f1;
        }

        #menu ul li a:hover,
        #menu ul li a.current {
            color: #fff;
            background: #666;
        }

        /*ie6 hack*/
        * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
        }

        * html #menu {
            /*position: fixed;*/
            position: absolute;
            top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }

</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
        $(document).ready(function () {
            $(window).scroll(function () {
                var top = $(document).scrollTop();//获取当前位置
                var menu = $("#menu");
                var items = $("#content").find(".item");

// 请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点
                var currentId = "";//当前所在楼层ID（item)
                items.each(function(){//当前位置和每个楼层的位置比较
                    var m = $(this);
                    var itemTop = m.offset().top;
                    if(top > itemTop - 200){
                        currentId = "#" + m.attr("id");//判断当前所在楼层
                    } else {
                        return false;
                    }
                })
 
                var currentLink = menu.find(".current");//找到带有current属性的链接
                if(currentId && currentLink.attr("href") != currentId){//如果currentId为空或链接位置已经是当前楼层则不执行
                    currentLink.removeClass("current");//删除带有current属性的链接的current属性
                    menu.find("[href=" + currentId + "]").addClass("current")//为当前楼层的链接添加current属性
                }
 
            });

        });
</script>
</head>
<body>
<div id="menu">
<h1>正在首发</h1>
<ul>
<li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>
<li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>
<li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>
<li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>
<li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>
</ul>
</div>
<div id="content">

<div id="item1" class="item">
<img src="http://img.mukewang.com/536ca02800014e7105000400.jpg">
</div>
<div id="item2" class="item">
<img src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">
</div>
<div id="item3" class="item">
<img src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">
</div>
<div id="item4" class="item">
<img src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">
</div>
<div id="item5" class="item">
<img src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">
</div>
</div>
</body>
</html>